<template>
  <el-card class="results-card">
    <template #header>
      <div class="card-header">
        <div>
          <el-icon><List /></el-icon>
          <span class="header-text">日志列表</span>
        </div>
        <div>
          <el-tag type="info">共 {{ total }} 条记录</el-tag>
        </div>
      </div>
    </template>

    <div class="table-container">
      <ToggleSections>
        <template #sidebar="{ isCollapsed }">
          <TableFields
            v-model="selectedTableFields"
            :option-fields="optionFields"
            :table-name="tableName"
          />
        </template>
        <template #content="{ isCollapsed }">
          <Section padding="0 5px">
            <DataTable
              :data="data"
              :loading="loading"
              :columns="dynamicColumns"
              @view-click="handleViewClick"
            />
          </Section>
        </template>
      </ToggleSections>
    </div>

    <template #footer>
      <div class="card-footer">
        <div>
          <span class="text-muted"
            >显示 {{ (currentPage - 1) * pageSize + 1 }}-{{
              Math.min(currentPage * pageSize, total)
            }}
            条，共 {{ total }} 条</span
          >
        </div>
        <el-pagination
          small
          layout="prev, pager, next"
          :total="total"
          :page-size="pageSize"
          :current-page="currentPage"
          @current-change="handlePageChange"
        />
      </div>
    </template>
  </el-card>
</template>

<script setup lang="tsx">
import { List } from '@element-plus/icons-vue'
import { ref, computed, watch, defineEmits } from 'vue'
import DataTable from './DataTable.vue'
import TableFields from './TableFields.vue'
import ToggleSections from '@/components/ToggleSections.vue'
import { Section } from '@/core/components'
import type { Field, OptionField } from './types'

const handleViewClick = row => {
  emit('view-click', row)
}

interface Props {
  data: any[]
  loading: boolean
  total: number
  modelValue: string[]
  tableName: string
  fields: Array<Field>
  pageSize?: number
}

const props = withDefaults(defineProps<Props>(), {
  pageSize: 10,
})

const optionFields = computed<Array<OptionField>>(() => {
  return props.fields.map(field => {
    return {
      ...field,
      alwaysSelected: false,
      selected: false,
    }
  })
})

const selectedTableFields = ref([])

const emit = defineEmits<{
  (e: 'view-click', row: any): void
  (e: 'page-change', pageNum: number): void
  (e: 'column-changed', value: string[]): void
}>()

const currentPage = ref(1)

const handlePageChange = (pageNum: number) => {
  currentPage.value = pageNum
  emit('page-change', pageNum)
}

const dynamicColumns = computed(() => {
  return selectedTableFields.value
    .map(fieldName =>
      optionFields.value.find(field => field.name === fieldName)
    )
    .filter(Boolean)
    .sort((a, b) => {
      if (a?.alwaysSelected && !b?.alwaysSelected) return 1
      if (!a?.alwaysSelected && b?.alwaysSelected) return -1
      return 0
    })
})

watch(
  dynamicColumns,
  newVal => {
    emit('column-changed', newVal)
  },
  { immediate: true }
)
</script>

<style scoped>
.results-card {
  width: 100%;
  border-radius: 4px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-text {
  margin-left: 8px;
  font-weight: 600;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
}

.text-muted {
  color: var(--el-text-color-secondary);
  font-size: 0.875rem;
}

.table-container {
  display: flex;
  gap: 16px;
}
</style>
